<template>
  <div class="container">
    <div class="search">
      <el-form inline :model="searchForm">
        <el-form-item label="请选择站点：">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-refresh-right">刷新</el-button>
      </el-form>
    </div>
    <div class="tabbox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="访客地区饼图" name="first">访客地区饼图</el-tab-pane>
      </el-tabs>
      <el-tabs v-model="activeName2">
        <el-tab-pane label="访客地区折线图" name="first">访客地区折线图</el-tab-pane>
      </el-tabs>
    </div>
    <div class="echartsbox">
      <p>访客地区列表</p>
      <el-table :data="tableData">
        <el-table-column label="渠道" prop="idx" />
        <el-table-column label="用户数" />
        <el-table-column label="新用户" />
        <el-table-column label="会话数" />
        <el-table-column label="跳出率" />
        <el-table-column label="每次会话浏览页数" />
        <el-table-column label="平均会话时长" />
      </el-table>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      tableData: [
        { idx: 3 }
      ],
      searchForm: {},
      activeName: 'first',
      activeName2: 'first',
      options: [{
        value: '选项1',
        label: '站点1'
      }, {
        value: '选项2',
        label: '站点2'
      }, {
        value: '选项3',
        label: '站点3'
      }, {
        value: '选项4',
        label: '站点4'
      }, {
        value: '选项5',
        label: '站点5'
      }],
      value: ''
    }
  },
  methods: {
    handleClick(tab, event) {

    }
  }
}
</script>
<style lang="scss" scoped>
.search{
    background-color: #fff;
    padding: 15px 10px;
    .el-form-item{
        margin-bottom: 0;
    }
    .el-button {
        font-size: 14px;
    }
}

.tabbox{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    .el-tabs{
        width: calc(50% - 7px);
        background-color: #fff;
        padding: 10px;
        height: 500px;
    }
}
.echartsbox{
    background-color: #fff;
    padding: 10px;
    margin-top: 15px;
    height: 400px;
    p{
        border-bottom: solid 1px #f5f7f9;
       padding: 5px 0 15px ;
    }
}
</style>
